<template>
    <div id='finance-compute'>
        <group class='finance-count'>
            <x-input type='number' title='投资金额(元)' placeholder='请输入' v-model='money'></x-input>
            <p class='error' v-show='error ==1? true : false'>请填写投资金额</p>
            <p class='error' v-show='error ==4? true : false'>投资金额不能超过1亿</p>
            <x-input type='number' title='投资期限(月)' placeholder='请输入' v-model='month'></x-input>
            <p class='error' v-show='error ==2? true : false'>请填写投资期限</p>
            <p class='error' v-show='error ==5? true : false'>投资期限最大不能超过360个月</p>
            <x-input type='number' title='年化收益率(%)' placeholder='请输入' v-model='year'></x-input>
            <p class='error' v-show='error ==3? true : false'>请填写年化收益率</p>
            <p class='error' v-show='error ==6? true : false'>年化收益率最大值不能超过100%</p>
        </group>
        <flexbox class='persion-btn'>
            <flexbox-item><div class='flex-demo next' @click='empty'>清空重填</div></flexbox-item>
            <flexbox-item><div class='flex-demo' @click='start'>开始计算</div></flexbox-item>
        </flexbox>
        <div class='circle'></div>
        <div class='count-resoult' v-if='soult'>
            <tab bar-active-color="rgb(47, 120, 236)" :line-width="2">
                <tab-item   selected @on-item-click='onItemClick'>等额本息</tab-item>
                <tab-item   @on-item-click='onItemClick'>先息后本</tab-item>
                <tab-item  @on-item-click='onItemClick'>还本付息</tab-item>
            </tab>
            <ul class='count-ul'>
                <li>
                    <div>
                        贷款金额(元)
                            <br/>
                            <span>{{moneys}}</span>
                    </div>
                    <div>
                        总收益(元)
                            <br/>
                            <span v-show='index'>{{interest}}</span>
                            <span v-show='index1'>{{interest1}}</span>
                            <span v-show='index2'>{{interest2}}</span>
                    </div>
                </li>
                <li>
                    <div>
                        总回款(元)
                            <br/>
                            <span v-show='index'>{{refund}}</span>
                            <span v-show='index1'>{{refund1}}</span>
                            <span v-show='index2'>{{refund2}}</span>
                    </div>
                    <div>
                        每月回款(元)
                            <br/>
                            <span v-show='index'>{{monthly}}</span>
                            <span v-show='index1'>{{monthly1}}</span>
                            <span v-show='index2'>{{monthly2}}</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import { XInput, Group, Flexbox, FlexboxItem, Tab, TabItem } from 'vux'
export default {
  data () {
    return {
      error: 0,
      soult: false,
      money: null,
      month: '',
      year: '',
      moneys: '0.00',
      interest: '0.00',
      refund: '0.00',
      monthly: '0.00',
      interest1: '0.00',
      refund1: '0.00',
      monthly1: '0.00',
      interest2: '0.00',
      refund2: '0.00',
      monthly2: '0.00',
      index: true,
      index1: false,
      index2: false
    }
  },
  components: {
    XInput,
    Group,
    Flexbox,
    FlexboxItem,
    Tab,
    TabItem
  },
  created () {
    window.document.title = '理财计算器'
  },
  methods: {
    empty () {
      this.money = ''
      this.month = ''
      this.year = ''
      this.soult = false
    },
    onItemClick (index) {
      if (this.money !== '') {
        if (index === 1) {
          this.index1 = true
          this.index = false
          this.index2 = false
          this.xxhb()
        }
        if (index === 2) {
          this.index2 = true
          this.index = false
          this.index1 = false
          this.hbfx()
        }
        if (index === 0) {
          this.index1 = false
          this.index2 = false
          this.index = true
          this.debx()
        }
      }
    },
    start () {
      if (this.money === '' || this.money === null) {
        this.error = 1
        this.soult = false
      } else if (this.money > 100000000) {
        this.error = 4
        this.soult = false
      } else if (this.month === '') {
        this.error = 2
        this.soult = false
      } else if (this.month > 360) {
        this.error = 5
        this.soult = false
      } else if (this.year === '') {
        this.error = 3
        this.soult = false
      } else if (this.year > 100) {
        this.error = 6
        this.soult = false
      }
      if (this.money !== '' && this.month !== '' && this.year !== '' && this.money <= 100000000) {
        if (this.month >= 0 && this.year >= 0 && this.month <= 360 && this.year <= 100) {
          this.count()
        }
      }
    },
    count () {
      this.soult = true
      this.error = 0
      var money = parseFloat(this.money) // 投资金额
      this.moneys = money.toFixed(2)
    //   var month = parseInt(this.month) // 投资期限
    //   var year = this.year // 年化收益率
      if (this.index === true) {
        this.index1 = false
        this.index2 = false
        this.debx()
      }
      if (this.index1 === true) {
        this.index = false
        this.index2 = false
        this.xxhb()
      }
      if (this.index2 === true) {
        this.index = false
        this.index1 = false
        this.hbfx()
      }
    },
    xxhb () {
      var money = parseFloat(this.money) // 投资金额
      this.moneys = money.toFixed(2)
      var month = parseInt(this.month) // 投资期限
      var year = this.year// 年化收益率
      // 每月回款
      var sum = money * year / 100 * (month / 12)
      this.monthly1 = (sum.toFixed(2) / month).toFixed(2)
      // 先息后本 利息收益
      this.interest1 = money * year / 100 * (month / 12)
      this.interest1 = this.interest1.toFixed(2)
      var allfund = parseFloat(this.money) + parseFloat(this.interest1)
      this.refund1 = allfund.toFixed(2)
    },
    hbfx () {
      var money = parseFloat(this.money) // 投资金额
      this.moneys = money.toFixed(2)
      var month = parseInt(this.month) // 投资期限
      var year = this.year // 年化收益率
      // 先息后本 利息收益
      this.interest2 = money * year / 100 * (month / 12)
      this.interest2 = this.interest2.toFixed(2)
      var allfund = parseFloat(this.money) + parseFloat(this.interest2)
      this.refund2 = allfund.toFixed(2)
      this.monthly2 = '0.00'
    },
    debx () {
      var money = parseFloat(this.money)  // 投资金额
      this.moneys = money.toFixed(2)
      var month = parseInt(this.month) // 投资期限
      var year = this.year // 年化收益率
      year = year / 1200
      var TotalRate = (money * month * year * Math.pow((1 + year), month)) / (Math.pow((1 + year), month) - 1) - money
      this.interest = Math.round(TotalRate * 100) / 100 // 利息收益
      this.refund = this.interest + parseFloat(this.money) // 总回款
      var monthly = this.refund / this.month
      this.monthly = monthly.toFixed(2) // 每月回款
    }
  }
}
</script>

